<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06  vue</title>
</head>
<body>
    <div>
        <h3>商品价格<input id="goodsprice" /></h3>
        <h3>商品数量<input id="goodsnum" /></h3>
        <h3>小计<span id="total"></span></h3>
    </div>
    
</body>
<script>

let goodspriceInput = document.getElementById("goodsprice");
    let goodsnumInput = document.getElementById("goodsnum");
    let goodsinfo = {
        totalSpan: document.getElementById("total")
    };//对象



    let goodsinfo = new Proxy({},{
        set(target,attr,value){
            target[attr] = value;
            
        },
        get(target,attr){
            return target[attr];
        }
    })


    function complier(){
        totalSpan.innerHTML = goodsinfo.goodsprice*goodsinfo.goodsnum;
    }


    goodspriceInput.oninput = function () {
        goodsinfo.goodsprice = this.value;//对象的赋值
    }
    goodsnumInput.oninput = function () {
        goodsinfo.goodsnum = this.value;//对象的赋值

    }

</script>
</html>